import React, { useState } from 'react';
import { store } from '@/app/store';
import { useSelector, useDispatch } from 'react-redux';
import { increment, selectCount, decrement, incrementByAmount } from './CounterSlice';
const Counter: React.FC = () => {
  //1 定义count,从store中取值
  //2 按钮可以发起action
  const count = useSelector(selectCount);
  const dispatch = useDispatch();
  console.log('count', count);
  const [incrementAmount, setIncrementAmount] = useState(2);

  return (
    <div className="counter">
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(increment())}>+</button>
      <div>{count}</div>
      <input
        type="text"
        defaultValue={`${incrementAmount}`}
        onChange={(e) => setIncrementAmount(parseInt(e.target.value))}
      />
      <button onClick={() => dispatch(incrementByAmount(incrementAmount))}>
        add amount
      </button>
      <button>add async</button>
      <button>add if odd</button>
    </div>
  );
};
export default Counter;
